import { ref, reactive, computed, defineComponent, unref, mergeProps, withCtx, createVNode, useSSRContext, watch, onMounted, resolveComponent, createTextVNode, toDisplayString, openBlock, createBlock, createCommentVNode, Fragment, renderList, withDirectives, vShow, resolveDirective, onUnmounted, onServerPrefetch } from "vue";
import { ssrRenderComponent, ssrRenderAttr, ssrRenderAttrs, ssrInterpolate, ssrRenderClass, ssrRenderStyle, ssrRenderList, ssrGetDirectiveProps, ssrRenderSlot } from "vue/server-renderer";
import { useRoute } from "vue-router";
import { defineStore } from "pinia";
import { ag as api, p as useMainStore, _ as _export_sfc, z as useL10n, ah as discountCalculation, q as cdnUrl, I as IconWrapper, v as ArrowRightIcon, ai as appendClickTrackData, B as useUserInfoStore } from "../entry-server.js";
import { useI18n } from "vue-i18n";
import { u as useDocumentTitle } from "./index-17d7ee25.js";
import { ContentLoader } from "vue-content-loader";
import { S as StarFillIcon, a as StarIcon } from "./StarFillIcon-1dc312f8.js";
import "path";
import "lodash-es";
import "dayjs";
import "dayjs/plugin/utc.js";
import "qs";
import "axios";
import "big.js/big.mjs";
import "@vueuse/core";
import "uuid";
import "url";
import "fs/promises";
const getProductDetailApi = (params) => {
  return api.get({
    url: "v2/product",
    params
  });
};
const reg = /[\s|：|:]/g;
const initOptions = (options, {
  querySkuId = 0,
  queryGroupName = "",
  queryColorName = "",
  queryColorId = -1,
  previewSize = [],
  previewImg = "",
  beforeVideo = [],
  // 是否是亲子装
  isParentChildOutfit = false,
  isUniqueColorParentChildOutfit = false
}) => {
  const newOptions = handleOptionsData(options);
  if (isUniqueColorParentChildOutfit && newOptions[0] && newOptions[0].groups[0] && newOptions[0].groups[0] && newOptions[0].groups[0].group_name_en === "All") {
    insertImage(newOptions[0].images, previewImg);
    if (beforeVideo.length > 0) {
      newOptions[0].images.unshift(...beforeVideo);
    }
    beforeVideo = [];
  }
  let defaultSkuId = 0;
  let defaultColorId = -1;
  let defaultGroupName = "";
  let defaultSelectImages = [];
  let skuInfo = null;
  if (querySkuId) {
    skuInfo = getDefaultSkuInfoBySkuId(newOptions, {
      querySkuId,
      previewImg
    });
  }
  if (!skuInfo && previewSize.length > 0) {
    if (queryColorName || queryColorId) {
      skuInfo = getDefaultSkuInfoByPreviewSize(newOptions, {
        queryColorName,
        queryColorId,
        previewSize,
        isParentChildOutfit,
        previewImg
      });
    } else {
      skuInfo = getDefaultSkuInfoByPreviewSize(newOptions, {
        queryColorName: "",
        queryColorId: -1,
        previewSize,
        isParentChildOutfit,
        previewImg
      });
      if (skuInfo) {
        defaultSkuId = skuInfo.defaultSkuId;
        defaultColorId = skuInfo.defaultColorId;
        defaultGroupName = skuInfo.defaultGroupName;
        defaultSelectImages = skuInfo.defaultSelectImages;
      }
    }
  }
  if (skuInfo) {
    defaultSkuId = skuInfo.defaultSkuId;
    defaultColorId = skuInfo.defaultColorId;
    defaultGroupName = skuInfo.defaultGroupName;
    defaultSelectImages = skuInfo.defaultSelectImages;
  }
  if (!defaultSkuId) {
    let groupInfo = null;
    if (queryGroupName) {
      groupInfo = getDefaultGroupInfoByGroupName(newOptions, {
        queryGroupName,
        queryColorName,
        previewImg
      });
    }
    if (!groupInfo && isUniqueColorParentChildOutfit) {
      const colorId = newOptions[0] ? newOptions[0].option_value_id : -1;
      let groupName = "";
      let images = [];
      if (colorId > -1) {
        const groupItem = newOptions[0].groups.find((groupItem2) => groupItem2.stock > 0);
        if (groupItem) {
          groupName = groupItem.group.group_name_en;
          images = groupItem.group.images.length > 0 ? groupItem.group.images : newOptions[0].images;
        }
        if (groupName) {
          insertImage(images, previewImg);
          groupInfo = {
            defaultColorId: colorId,
            defaultGroupName: groupName,
            defaultSelectImages: images
          };
        }
      }
    }
    if (groupInfo) {
      defaultColorId = groupInfo.defaultColorId;
      defaultGroupName = groupInfo.defaultGroupName;
      defaultSelectImages = groupInfo.defaultSelectImages;
    }
  }
  if (!defaultGroupName) {
    let colorInfo = null;
    if (queryColorName || queryColorId > -1) {
      colorInfo = getDefaultColorInfoByColorName(newOptions, {
        queryColorName,
        queryColorId,
        previewImg
      });
    }
    if (colorInfo) {
      defaultColorId = colorInfo.defaultColorId;
      defaultSelectImages = colorInfo.defaultSelectImages;
    } else {
      const defaultColor = newOptions.find((item) => item && item.stock > 0);
      console.log(defaultColor, "defaultColor");
      if (defaultColor) {
        insertImage(defaultColor.images, previewImg);
        defaultColorId = defaultColor.option_value_id;
        defaultSelectImages = defaultColor.images;
      }
    }
  }
  if (beforeVideo.length > 0) {
    defaultSelectImages.unshift(...beforeVideo);
  }
  return {
    defaultSkuId,
    defaultColorId,
    defaultGroupName,
    defaultSelectImages,
    options: newOptions
  };
};
const transformImages = (arr) => {
  return (arr || []).map((item) => {
    return {
      type: "img",
      icon: item
    };
  });
};
const handleOptionsData = (options) => {
  options = JSON.parse(JSON.stringify(options || []));
  return options.map((item) => {
    let colorStock = 0;
    const newColorItem = { ...item.color };
    const colorImages = transformImages(item.color.images);
    newColorItem.images = colorImages;
    const colorIcon = colorImages[0] ? colorImages[0].icon : "";
    let notSize = true;
    const defaultSku = item.color.sku && item.color.sku.sku_id ? item.color.sku.sku_id : null;
    if (item.color && item.color.groups && item.color.groups.length > 0) {
      if (item.color.groups.length === 1 && item.color.groups[0].sizes.length === 0) {
        const sku = item.color.groups[0].sku && item.color.groups[0].sku.sku_id ? item.color.groups[0].sku : null;
        const stock = sku ? sku.event_stock || 0 : 0;
        newColorItem.stock = colorStock || stock;
        newColorItem.sku = sku;
        newColorItem.groups = [];
        newColorItem.skuList = sku ? [sku] : [];
        newColorItem.notSize = notSize;
        return newColorItem;
      } else {
        const colorSkuList = [];
        const newGroups = item.color.groups.map((groupsItem) => {
          let groupStock = 0;
          const groupSkuList = [];
          let sizes = [];
          const newGroupsItem = { ...groupsItem.group };
          const groupImages = transformImages(groupsItem.images);
          newGroupsItem.images = groupImages.length > 0 ? groupImages : newColorItem.images;
          newGroupsItem.icon = newGroupsItem.images[0] ? newGroupsItem.images[0].icon : colorIcon;
          if (groupsItem.sizes && groupsItem.sizes.length > 0) {
            sizes = groupsItem.sizes.map((size) => {
              notSize = false;
              const { stock, sku } = getSizeStock(size);
              colorStock += stock;
              groupStock += stock;
              if (sku) {
                groupSkuList.push(sku);
                colorSkuList.push(sku);
              }
              return {
                ...size,
                stock,
                sku
              };
            });
          }
          newGroupsItem.stock = groupStock;
          newGroupsItem.sizes = sizes;
          newGroupsItem.skuList = groupSkuList;
          return newGroupsItem;
        });
        newColorItem.stock = colorStock;
        newColorItem.skuList = colorSkuList;
        newColorItem.groups = newGroups;
        return newColorItem;
      }
    } else {
      colorStock = defaultSku ? defaultSku.event_stock || defaultSku.stock || 0 : 0;
      newColorItem.stock = colorStock;
      newColorItem.sku = defaultSku;
      newColorItem.groups = [];
      newColorItem.notSize = notSize;
      newColorItem.skuList = defaultSku ? [defaultSku] : [];
      return newColorItem;
    }
  });
};
const onFindIndex = (arr, icon) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].icon === icon) {
      return i;
    }
  }
  return -1;
};
const insertImage = (images, previewImg) => {
  if (!previewImg) {
    return;
  }
  if (/\.gif\.jpg$/i.test(previewImg)) {
    previewImg = previewImg.replace(/\.jpg$/i, "");
  }
  if (previewImg) {
    const defaultImgIndex = onFindIndex(images, previewImg);
    if (defaultImgIndex > -1) {
      images.splice(defaultImgIndex, 1);
      images.unshift({
        type: "img",
        icon: previewImg
      });
    }
  }
};
const getDefaultSkuInfoBySkuId = (options, { querySkuId, previewImg = "" }) => {
  for (let i = 0; i < options.length; i++) {
    const color = options[i] || {};
    const colorId = color.option_value_id;
    if (!color.notSize) {
      const groups = color.groups;
      for (let j = 0; j < groups.length; j++) {
        const groupItem = groups[j].group;
        const groupsName = groupItem ? groupItem.group_name_en : "";
        const sizes = groupItem.sizes || [];
        for (let k = 0; k < sizes.length; k++) {
          const sizeItem = sizes[k];
          if (sizeItem.sku && sizeItem.sku.sku_id === querySkuId) {
            insertImage(groupItem.images, previewImg);
            if (sizeItem.sku.event_stock > 0) {
              return {
                defaultSkuId: querySkuId,
                defaultColorId: colorId,
                defaultGroupName: groupsName,
                defaultSelectImages: groupItem.images
              };
            }
          }
        }
      }
    } else if (color.sku && color.sku.sku_id === querySkuId) {
      insertImage(color.images, previewImg);
      if (color.sku.event_stock > 0) {
        return {
          defaultSkuId: querySkuId,
          defaultColorId: colorId,
          defaultGroupName: "",
          defaultSelectImages: color.images
        };
      }
    }
  }
  return null;
};
const getDefaultSkuInfoByPreviewSize = (options, { queryColorName = "", queryColorId = -1, previewSize = [], isParentChildOutfit = false, previewImg = "" }) => {
  const colorOption = queryColorName || queryColorId;
  if (colorOption && colorOption !== -1) {
    for (let j = 0; j < previewSize.length; j++) {
      const sizeName = previewSize[j];
      if (sizeName) {
        for (let i = 0; i < options.length; i++) {
          const color = options[i];
          if (color.notSize) {
            continue;
          }
          if (color.option_value_id === colorOption || color.option_value_en === colorOption || color.option_value_name === colorOption) {
            if (isParentChildOutfit) {
              for (let index = 0; index < color.groups.length; index++) {
                const groupitem = color.groups[index];
                const sizeInfo = (groupitem.sizes || []).find((size) => {
                  return (size.option_value_name.replace(reg, "").indexOf(sizeName) > -1 || size.option_value_name_en.replace(reg, "").indexOf(sizeName) > -1) && size.stock > 0;
                });
                if (sizeInfo) {
                  insertImage(groupitem.images, previewImg);
                  if (sizeInfo.sku.event_stock > 0) {
                    return {
                      defaultSkuId: sizeInfo.sku.sku_id,
                      defaultColorId: color.option_value_id,
                      defaultGroupName: groupitem.group_name_en,
                      defaultSelectImages: groupitem.images
                    };
                  }
                }
              }
            } else {
              if (color.groups[0] && color.groups[0].sizes) {
                const groupitem = color.groups[0];
                const sizeInfo = groupitem.sizes.find((size) => {
                  return (size.option_value_name.replace(reg, "").indexOf(sizeName) > -1 || size.option_value_name_en.replace(reg, "").indexOf(sizeName) > -1) && size.stock > 0;
                });
                if (sizeInfo) {
                  insertImage(groupitem.images, previewImg);
                  if (sizeInfo.sku.event_stock > 0) {
                    return {
                      defaultSkuId: sizeInfo.sku.sku_id,
                      defaultColorId: color.option_value_id,
                      defaultGroupName: groupitem.group_name_en,
                      defaultSelectImages: groupitem.images
                    };
                  }
                }
              }
            }
          }
        }
      }
    }
  } else {
    const colorItem = options.find((item) => item && item.stock > 0);
    if (colorItem) {
      const color = colorItem;
      for (let j = 0; j < previewSize.length; j++) {
        const sizeName = previewSize[j];
        if (sizeName) {
          if (isParentChildOutfit) {
            for (let index = 0; index < color.groups.length; index++) {
              const groupitem = color.groups[index];
              const sizeInfo = groupitem.sizes.find((size) => {
                return (size.option_value_name.replace(reg, "").indexOf(sizeName) > -1 || size.option_value_name_en.replace(reg, "").indexOf(sizeName) > -1) && size.stock > 0;
              });
              if (sizeInfo) {
                insertImage(groupitem.images, previewImg);
                if (sizeInfo.sku.event_stock > 0) {
                  return {
                    defaultSkuId: sizeInfo.sku.sku_id,
                    defaultColorId: color.option_value_id,
                    defaultGroupName: groupitem.group_name_en,
                    defaultSelectImages: groupitem.images
                  };
                }
              }
            }
          } else {
            if (color.groups[0] && color.groups[0].sizes) {
              const groupitem = color.groups[0];
              const sizeInfo = groupitem.sizes.find((size) => {
                return (size.option_value_name.replace(reg, "").indexOf(sizeName) > -1 || size.option_value_name_en.replace(reg, "").indexOf(sizeName) > -1) && size.stock > 0;
              });
              if (sizeInfo) {
                insertImage(groupitem.images, previewImg);
                if (sizeInfo.sku.event_stock > 0) {
                  return {
                    defaultSkuId: sizeInfo.sku.sku_id,
                    defaultColorId: color.option_value_id,
                    defaultGroupName: groupitem.group_name_en,
                    defaultSelectImages: groupitem.images
                  };
                }
              }
            }
          }
        }
      }
    }
  }
  return null;
};
const getDefaultGroupInfoByGroupName = (options, { queryGroupName = "", queryColorName = "", previewImg = "" }) => {
  let defaultGroupInfo = null;
  if (queryColorName) {
    for (let i = 0; i < options.length; i++) {
      const color = options[i] || {};
      const colorId = color.option_value_id;
      const colorName = color.option_value_name;
      if (color.groups.length > 0) {
        const groups = color.groups;
        for (let j = 0; j < groups.length; j++) {
          const groupItem = groups[j] || {};
          if (groupItem && groupItem.group_name_en === queryGroupName) {
            if (colorName === queryColorName || color.option_value_en === queryColorName) {
              insertImage(groupItem.images, previewImg);
              if (groupItem.stock > 0) {
                return {
                  defaultGroupName: queryGroupName,
                  defaultColorId: colorId,
                  defaultSelectImages: groupItem.images
                };
              }
            } else {
              if (groupItem.stock > 0) {
                defaultGroupInfo = {
                  defaultGroupName: queryGroupName,
                  defaultColorId: colorId,
                  defaultSelectImages: groupItem.images
                };
              }
            }
          }
        }
      }
    }
  } else {
    for (let i = 0; i < options.length; i++) {
      const color = options[i] || {};
      const colorId = color.option_value_id;
      if (color.groups.length > 0) {
        const groups = color.groups;
        for (let j = 0; j < groups.length; j++) {
          const groupItem = groups[j] || {};
          if (groupItem && groupItem.group_name_en === queryGroupName) {
            insertImage(groupItem.images, previewImg);
            if (groupItem.stock > 0) {
              return {
                defaultGroupName: queryGroupName,
                defaultColorId: colorId,
                defaultSelectImages: groupItem.images
              };
            }
          }
        }
      }
    }
  }
  if (defaultGroupInfo) {
    insertImage(defaultGroupInfo.defaultSelectImages, previewImg);
  }
  return defaultGroupInfo;
};
const getDefaultColorInfoByColorName = (options, { queryColorName = "", previewImg = "", queryColorId = -1 }) => {
  for (let i = 0; i < options.length; i++) {
    const color = options[i] || {};
    if (color.option_value_en === queryColorName || color.option_value_name === queryColorName || queryColorId === color.option_value_id) {
      insertImage(color.images, previewImg);
      if (color.stock > 0) {
        return {
          defaultColorId: color.option_value_id,
          defaultSelectImages: color.images || []
        };
      }
    }
  }
  return null;
};
const getSizeStock = (sizeInfo) => {
  if (sizeInfo.sku) {
    const sizeSku = sizeInfo.sku;
    if (sizeSku) {
      const stock = sizeInfo.sku.stock || sizeInfo.sku.event_stock || 0;
      const sku = sizeInfo.sku;
      return {
        stock,
        sku
      };
    }
  }
  return {
    stock: 0,
    sku: null
  };
};
const parentChildOutfitCategoryNameMap = ["Matching Outfits", "Family Look", "Daddy and Me", "Mommy and Me"];
const useProductDetailsStore = defineStore("productDetails", () => {
  const route = useRoute();
  const mainStore = useMainStore();
  const a = ref(1);
  const setA = (v) => {
    a.value = v;
  };
  const products = reactive({
    products: []
  });
  const productData = computed(() => {
    const product = products.products.find((product2) => decodeURI(product2.path) === decodeURI(route.path));
    if (product) {
      return product;
    } else {
      return null;
    }
  });
  const getProductDetails = async () => {
    try {
      let urlName = "";
      if (route) {
        urlName = typeof route.params.name === "string" ? route.params.name : "";
      }
      const params = {
        is_v2: 1,
        product_name: urlName
      };
      let pcoSupportAll = 0;
      if (mainStore.getABTestExperiment("h5_product_details_v4_3") === "A") {
        pcoSupportAll = 1;
        params.pco_support_all = 1;
      }
      const data = await getProductDetailApi(params);
      const status = data.display_status;
      const product = {
        path: route.path,
        fullPath: route.fullPath,
        displayStatus: status
      };
      if (status === 1) {
        product.lunaSlides = data.luna_slides || [];
        product.isLunaProducts = !!data.is_luna;
        product.structuredDescription = data.structured_description || [];
        product.gptEnable = !!data.gpt_enable;
        product.gptDescription = data.gpt_description || [];
        product.lotteryFreeGift = data.is_lottery_free_gift;
        const gptName = data.gpt_name || "";
        let productName = data.products && data.products[0] && typeof data.products[0].product_name === "string" ? data.products[0].product_name : "";
        if (product.gptEnable && gptName) {
          productName = gptName;
        }
        product.gptName = gptName;
        product.productName = productName;
        product.layoutInfo = data.layout;
        product.showSizeChart = !!data.show_size_chart;
        product.standardSizes = data.standard_sizes;
        product.productDetailExpansion = data.product_detail_expansion || {};
        product.taxInfo = data.tax_info;
        product.urlName = data.url_name;
        product.categoryTreeStr = data.category_tree_str ? data.category_tree_str.replace(/[>]/g, "/") : "";
        const pms = data.pms;
        product.isLuna = pms && pms.first_level_category_name ? pms.first_level_category_name === "GO-GLOW" : false;
        let isParentChildOutfit = false;
        if (pms) {
          isParentChildOutfit = parentChildOutfitCategoryNameMap.includes(pms.first_level_category_name) || parentChildOutfitCategoryNameMap.includes(pms.second_level_category_name);
        }
        product.isParentChildOutfit = isParentChildOutfit;
        const isSingleColorMatchingOutfits = !!(data.is_single_color_matching_outfits && pcoSupportAll);
        product.isSingleColorMatchingOutfits = isSingleColorMatchingOutfits;
        let productVideo = [];
        if (data.video_v2 && data.video_v2.length) {
          productVideo = data.video_v2.map((item) => {
            return {
              showMuted: !!item.is_sound,
              video: item.mp4_video_url,
              icon: item.video_master_img,
              type: "video"
            };
          });
        }
        const previewData = route.params && route.params.previewData ? route.params.previewData : {};
        const query = route.query || {};
        const previewImg = previewData.image ? previewData.image : "";
        const previewSize = route.params && route.params.previewSize && route.params.previewSize instanceof Array ? route.params.previewSize : [];
        const querySkuId = query.sku_id ? Number(query.sku_id) || 0 : 0;
        const queryColorId = query.color_id ? Number(query.color_id) : -1;
        const queryColorName = query.color_name_en && typeof query.color_name_en === "string" ? query.color_name_en : "";
        const queryGroupName = query.group_name_en && typeof query.group_name_en === "string" ? query.group_name_en : "";
        product.optionsConfig = initOptions(data.options, {
          querySkuId,
          queryGroupName,
          queryColorName,
          queryColorId,
          previewSize,
          previewImg,
          beforeVideo: productVideo,
          isParentChildOutfit,
          isUniqueColorParentChildOutfit: isSingleColorMatchingOutfits
        });
        if (status === 1 && data.products.length > 0) {
          const productsFirst = data.products[0];
          if (productsFirst) {
            const productId = productsFirst.product_id ? productsFirst.product_id : 0;
            const productCode = productsFirst.product_code ? productsFirst.product_code : 0;
            const likeNumber = productsFirst.like_number ? productsFirst.like_number : 0;
            const description = productsFirst.description ? productsFirst.description : "";
            const isCustomized = productsFirst.is_customized ? productsFirst.is_customized : 0;
            product.productInfo = {
              product_id: productId,
              product_code: productCode,
              product_name: productName,
              like_number: likeNumber,
              description,
              is_customized: isCustomized,
              product_status: status,
              event_id: 0,
              product_url: urlName,
              tags: productsFirst.tags ? productsFirst.tags : []
            };
            product.likeNumber = likeNumber;
            product.seoInfo = {
              name: productName,
              price: productsFirst.price || productsFirst.event_price || "1",
              img: productsFirst.icon
            };
            product.productId = productId;
          }
          if (data.ad_info) {
            product.adInfo = data.ad_info;
          }
          if (pms) {
            product.pms = pms;
            product.first_level_category_name = pms.first_level_category_name || "";
          }
          product.sizesInfo = data.standard_sizes;
          if (data.promotion && data.promotion[0]) {
            product.promotion = data.promotion[0];
          }
          product.isNewUserPrice = !!data.is_new_user;
        }
        const cacheProductIdx = products.products.findIndex((product2) => decodeURI(product2.path) === decodeURI(route.path));
        if (cacheProductIdx > -1)
          products.products.splice(cacheProductIdx, 1);
        products.products.push(product);
        return product;
      }
    } catch (e) {
      console.error("ERROR: store.product.getProductDetails", e);
    }
    return null;
  };
  const setProductData = () => {
    return productData.value;
  };
  return {
    a,
    setA,
    products,
    productData,
    setProductData,
    getProductDetails
  };
});
const _sfc_main$e = /* @__PURE__ */ defineComponent({
  __name: "ProductDetailSkuSkeleton",
  __ssrInlineRender: true,
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(ssrRenderComponent(unref(ContentLoader), mergeProps({
        "primary-color": "#f3f3f3",
        "secondary-color": "#ecebeb",
        "unique-key": "details-sku-skeleton",
        speed: 1,
        height: 504
      }, _attrs), {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<rect x="16" y="16"${ssrRenderAttr("width", 14800 / 375 + "%")} height="24" rx="4" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="56"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="94" y="56"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="172" y="56"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="250" y="56"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="108"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="94" y="108"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="172"${ssrRenderAttr("width", 14800 / 375 + "%")} height="24" rx="4" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="212"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="94" y="212"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="172" y="212"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="250" y="212"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="264"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="94" y="264"${ssrRenderAttr("width", 6600 / 375 + "%")} height="40" rx="20" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect><rect x="16" y="328"${ssrRenderAttr("width", 34300 / 375 + "%")} height="48" rx="24" fill="#F6F6F6" data-v-ff0be9a4${_scopeId}></rect>`);
          } else {
            return [
              createVNode("rect", {
                x: "16",
                y: "16",
                width: 14800 / 375 + "%",
                height: "24",
                rx: "4",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "56",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "94",
                y: "56",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "172",
                y: "56",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "250",
                y: "56",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "108",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "94",
                y: "108",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "172",
                width: 14800 / 375 + "%",
                height: "24",
                rx: "4",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "212",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "94",
                y: "212",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "172",
                y: "212",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "250",
                y: "212",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "264",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "94",
                y: "264",
                width: 6600 / 375 + "%",
                height: "40",
                rx: "20",
                fill: "#F6F6F6"
              }),
              createVNode("rect", {
                x: "16",
                y: "328",
                width: 34300 / 375 + "%",
                height: "48",
                rx: "24",
                fill: "#F6F6F6"
              })
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const ProductDetailSkuSkeleton_vue_vue_type_style_index_0_scoped_ff0be9a4_lang = "";
const _sfc_setup$e = _sfc_main$e.setup;
_sfc_main$e.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/skeleton/ProductDetailSkuSkeleton.vue");
  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
};
const ProductDetailSkuSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-ff0be9a4"]]);
const _sfc_main$d = /* @__PURE__ */ defineComponent({
  __name: "ProductDetailSkeleton",
  __ssrInlineRender: true,
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "" }, _attrs))} data-v-4329f254><div class="details-sku-skeleton" data-v-4329f254>`);
      _push(ssrRenderComponent(unref(ContentLoader), {
        width: "100vw",
        height: "100vw",
        viewBox: "0 0 375 375",
        speed: 1,
        "primary-color": "#f3f3f3",
        "secondary-color": "#ecebeb",
        "unique-key": "productDetailSaleSkeleton"
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<rect x="0" y="0" width="100vw" height="100vw" fill="#F6F6F6" data-v-4329f254${_scopeId}></rect>`);
          } else {
            return [
              createVNode("rect", {
                x: "0",
                y: "0",
                width: "100vw",
                height: "100vw",
                fill: "#F6F6F6"
              })
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`</div>`);
      _push(ssrRenderComponent(ProductDetailSkuSkeleton, null, null, _parent));
      _push(`</div>`);
    };
  }
});
const ProductDetailSkeleton_vue_vue_type_style_index_0_scoped_4329f254_lang = "";
const _sfc_setup$d = _sfc_main$d.setup;
_sfc_main$d.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/skeleton/ProductDetailSkeleton.vue");
  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
};
const ProductDetailSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4329f254"]]);
const _sfc_main$c = /* @__PURE__ */ defineComponent({
  __name: "PriceInfo",
  __ssrInlineRender: true,
  props: {
    showFrom: { type: Boolean, default: false },
    price: { default: "" },
    storePrice: { default: "" },
    discount: { default: "" },
    taxInfo: { default: "" }
  },
  setup(__props) {
    const props = __props;
    const { uts } = useL10n();
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref: "priceWrapRef",
        class: "price-wrap"
      }, _attrs))} data-v-011a2631>`);
      if (props.showFrom) {
        _push(`<span class="price-from" data-v-011a2631>${ssrInterpolate(_ctx.$t("product.category.price_from"))}</span>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<span id="sezzle-price" class="${ssrRenderClass([{ "color-black": props.discount }, "price"])}" data-v-011a2631>${ssrInterpolate(unref(uts)(props.price))}</span>`);
      if (props.taxInfo && !props.discount) {
        _push(`<span class="tax-info" data-v-011a2631>${ssrInterpolate(props.taxInfo)}</span>`);
      } else {
        _push(`<!---->`);
      }
      if (_ctx.discount) {
        _push(`<span class="price-original" data-v-011a2631><span class="p" data-v-011a2631>${ssrInterpolate(unref(uts)(props.storePrice))}</span>`);
        if (props.taxInfo) {
          _push(`<span class="tax-info" data-v-011a2631>${ssrInterpolate(props.taxInfo)}</span>`);
        } else {
          _push(`<!---->`);
        }
        if (props.discount) {
          _push(`<span class="discount" data-v-011a2631>${ssrInterpolate(props.discount)}</span>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</span>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
});
const PriceInfo_vue_vue_type_style_index_0_scoped_011a2631_lang = "";
const _sfc_setup$c = _sfc_main$c.setup;
_sfc_main$c.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/details/PriceInfo.vue");
  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
};
const PriceInfo = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-011a2631"]]);
const _sfc_main$b = /* @__PURE__ */ defineComponent({
  __name: "Preview",
  __ssrInlineRender: true,
  props: {
    previewData: { default: () => ({
      image: "",
      productName: "",
      name: "",
      msrp: "1",
      price: "1",
      storePrice: "1",
      thumbnailSize: "333.33x333.33",
      isMultiPrice: false
    }) },
    thumbnailSize: { default: "333.33x333.33" }
  },
  setup(__props) {
    const props = __props;
    const price = computed(() => {
      return props.previewData ? props.previewData.price : "1";
    });
    const storePrice = computed(() => {
      return props.previewData ? props.previewData.storePrice : "1";
    });
    const discount = computed(() => {
      return discountCalculation(price.value, storePrice.value);
    });
    const preImageUrl = computed(() => {
      return cdnUrl({ url: props.previewData.image, size: props.thumbnailSize, type: "", isSupportWebp: true });
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "product-preview" }, _attrs))} data-v-acbd1fc0><div class="icon" style="${ssrRenderStyle({ backgroundImage: `url('${preImageUrl.value}')` })}" data-v-acbd1fc0></div><div class="base-info" data-v-acbd1fc0>`);
      _push(ssrRenderComponent(PriceInfo, {
        price: _ctx.previewData.price,
        "store-price": discount.value ? storePrice.value : "0",
        discount: discount.value,
        "tax-info": "",
        "show-from": _ctx.previewData.isMultiPrice
      }, null, _parent));
      _push(`</div><h1 class="product-name" data-v-acbd1fc0>${ssrInterpolate(_ctx.previewData.name || "")}</h1><div data-v-acbd1fc0>`);
      _push(ssrRenderComponent(ProductDetailSkuSkeleton, null, null, _parent));
      _push(`</div></div>`);
    };
  }
});
const Preview_vue_vue_type_style_index_0_scoped_acbd1fc0_lang = "";
const _sfc_setup$b = _sfc_main$b.setup;
_sfc_main$b.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/details/Preview.vue");
  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
};
const Preview = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-acbd1fc0"]]);
const loadingImg = "";
const _sfc_main$a = /* @__PURE__ */ defineComponent({
  __name: "Images",
  __ssrInlineRender: true,
  props: {
    thumbnailSize: { default: "333.33x333.33" },
    images: { default: () => [] },
    preImageUrl: { default: "" },
    initialSwipe: { default: 0 },
    productName: { default: "" },
    seoImageColor: { default: "" },
    serverRenderImage: { default: "" }
  },
  setup(__props) {
    const props = __props;
    const mainStore = useMainStore();
    const showAddToCartAnimate = ref(false);
    const current = ref(props.initialSwipe + 1);
    const relSwiper = ref();
    const imagesStyle = computed(() => {
      if (props.preImageUrl) {
        return {
          backgroundImage: `url('${props.preImageUrl}')`
        };
      } else {
        return {};
      }
    });
    const addCartAnimateClass = computed(() => {
      let className = "";
      if (showAddToCartAnimate.value) {
        className = mainStore.isRtl ? "add-cart-anmate-ar" : "add-cart-anmate";
      }
      return className;
    });
    const addCartAnimateImage = computed(() => {
      return props.images && props.images[0] && props.images[0].icon ? props.images[0].icon : "";
    });
    const indicatorCurrent = computed(() => {
      return mainStore.isRtl ? props.images.length + 1 - current.value : current;
    });
    watch(props.images, (v, old) => {
      console.log(v, old);
      if (v.length === old.length) {
        const isChange = v.find((item, i) => {
          const img = old[i];
          if (img) {
            return item.icon !== img.icon;
          } else {
            return false;
          }
        });
        if (isChange) {
          reStartImages();
        }
      } else {
        reStartImages();
      }
    });
    const reStartImages = () => {
      current.value = props.initialSwipe + 1;
      const currentRef = relSwiper.value;
      if (currentRef && currentRef.swipeTo) {
        currentRef.swipeTo(props.initialSwipe, {
          immediate: true
        });
      }
    };
    const closeAddToCartAnimated = () => {
      showAddToCartAnimate.value = true;
    };
    const slideChanged = (index) => {
      current.value = index + 1;
    };
    onMounted(() => {
      reStartImages();
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_pat_swipe = resolveComponent("pat-swipe");
      const _component_pat_swipe_item = resolveComponent("pat-swipe-item");
      const _component_PImage = resolveComponent("PImage");
      const _component_ClientOnly = resolveComponent("ClientOnly");
      _push(`<div${ssrRenderAttrs(mergeProps({
        class: "images",
        style: imagesStyle.value
      }, _attrs))} data-v-d3c8d49b>`);
      _push(ssrRenderComponent(_component_pat_swipe, {
        ref_key: "relSwiper",
        ref: relSwiper,
        class: "product-images",
        loop: false,
        rebound: false,
        "initial-swipe": _ctx.initialSwipe,
        onChange: slideChanged
      }, {
        indicator: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="custom-indicator" data-v-d3c8d49b${_scopeId}>${ssrInterpolate(indicatorCurrent.value)} <i class="tran" data-v-d3c8d49b${_scopeId}>/</i> ${ssrInterpolate(_ctx.images.length)}</div>`);
          } else {
            return [
              createVNode("div", { class: "custom-indicator" }, [
                createTextVNode(toDisplayString(indicatorCurrent.value) + " ", 1),
                createVNode("i", { class: "tran" }, "/"),
                createTextVNode(" " + toDisplayString(_ctx.images.length), 1)
              ])
            ];
          }
        }),
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<!--[-->`);
            ssrRenderList(_ctx.images, (item, index) => {
              _push2(ssrRenderComponent(_component_pat_swipe_item, {
                key: index + item.icon,
                class: "swipe-item",
                style: {
                  "z-index": index === 0 ? 100 : "unset",
                  position: "relative"
                }
              }, {
                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  if (_push3) {
                    if (item.type === "img") {
                      _push3(ssrRenderComponent(_component_PImage, {
                        key: item.icon,
                        src: item.icon,
                        "thumbnail-size": props.thumbnailSize,
                        alt: `${_ctx.productName} ${_ctx.seoImageColor}`,
                        "lazy-load": index === _ctx.initialSwipe ? false : true,
                        "show-loading": index === _ctx.initialSwipe ? false : true,
                        "pre-image-url": index === _ctx.initialSwipe ? _ctx.preImageUrl : null,
                        class: "product-images-item"
                      }, {
                        loading: withCtx((_3, _push4, _parent4, _scopeId3) => {
                          if (_push4) {
                            _push4(`<img class="loading-icon"${ssrRenderAttr("src", unref(loadingImg))} alt="" data-v-d3c8d49b${_scopeId3}>`);
                          } else {
                            return [
                              createVNode("img", {
                                class: "loading-icon",
                                src: unref(loadingImg),
                                alt: ""
                              }, null, 8, ["src"])
                            ];
                          }
                        }),
                        _: 2
                      }, _parent3, _scopeId2));
                    } else {
                      _push3(`<!---->`);
                    }
                  } else {
                    return [
                      item.type === "img" ? (openBlock(), createBlock(_component_PImage, {
                        key: item.icon,
                        src: item.icon,
                        "thumbnail-size": props.thumbnailSize,
                        alt: `${_ctx.productName} ${_ctx.seoImageColor}`,
                        "lazy-load": index === _ctx.initialSwipe ? false : true,
                        "show-loading": index === _ctx.initialSwipe ? false : true,
                        "pre-image-url": index === _ctx.initialSwipe ? _ctx.preImageUrl : null,
                        class: "product-images-item"
                      }, {
                        loading: withCtx(() => [
                          createVNode("img", {
                            class: "loading-icon",
                            src: unref(loadingImg),
                            alt: ""
                          }, null, 8, ["src"])
                        ]),
                        _: 2
                      }, 1032, ["src", "thumbnail-size", "alt", "lazy-load", "show-loading", "pre-image-url"])) : createCommentVNode("", true)
                    ];
                  }
                }),
                _: 2
              }, _parent2, _scopeId));
            });
            _push2(`<!--]-->`);
          } else {
            return [
              (openBlock(true), createBlock(Fragment, null, renderList(_ctx.images, (item, index) => {
                return openBlock(), createBlock(_component_pat_swipe_item, {
                  key: index + item.icon,
                  class: "swipe-item",
                  style: {
                    "z-index": index === 0 ? 100 : "unset",
                    position: "relative"
                  }
                }, {
                  default: withCtx(() => [
                    item.type === "img" ? (openBlock(), createBlock(_component_PImage, {
                      key: item.icon,
                      src: item.icon,
                      "thumbnail-size": props.thumbnailSize,
                      alt: `${_ctx.productName} ${_ctx.seoImageColor}`,
                      "lazy-load": index === _ctx.initialSwipe ? false : true,
                      "show-loading": index === _ctx.initialSwipe ? false : true,
                      "pre-image-url": index === _ctx.initialSwipe ? _ctx.preImageUrl : null,
                      class: "product-images-item"
                    }, {
                      loading: withCtx(() => [
                        createVNode("img", {
                          class: "loading-icon",
                          src: unref(loadingImg),
                          alt: ""
                        }, null, 8, ["src"])
                      ]),
                      _: 2
                    }, 1032, ["src", "thumbnail-size", "alt", "lazy-load", "show-loading", "pre-image-url"])) : createCommentVNode("", true)
                  ]),
                  _: 2
                }, 1032, ["style"]);
              }), 128))
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(ssrRenderComponent(_component_ClientOnly, null, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(ssrRenderComponent(_component_PImage, {
              style: showAddToCartAnimate.value ? null : { display: "none" },
              class: ["animate-img", addCartAnimateClass.value],
              "thumbnail-size": props.thumbnailSize,
              src: addCartAnimateImage.value,
              onAnimationend: closeAddToCartAnimated
            }, null, _parent2, _scopeId));
          } else {
            return [
              withDirectives(createVNode(_component_PImage, {
                class: ["animate-img", addCartAnimateClass.value],
                "thumbnail-size": props.thumbnailSize,
                src: addCartAnimateImage.value,
                onAnimationend: closeAddToCartAnimated
              }, null, 8, ["class", "thumbnail-size", "src"]), [
                [vShow, showAddToCartAnimate.value]
              ])
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`</div>`);
    };
  }
});
const Images_vue_vue_type_style_index_0_scoped_d3c8d49b_lang = "";
const _sfc_setup$a = _sfc_main$a.setup;
_sfc_main$a.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/details/Images.vue");
  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
};
const Images = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d3c8d49b"]]);
const HalfStarIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14.444 5.085c.299.12.536.357.656.656l1.96 4.88 5.244.355a1.181 1.181 0 0 1 .678 2.085l-4.034 3.37 1.282 5.1a1.181 1.181 0 0 1-1.774 1.288l-4.452-2.795-4.453 2.795a1.181 1.181 0 0 1-1.774-1.289l1.283-5.098-4.034-3.371a1.181 1.181 0 0 1 .677-2.085l5.245-.356 1.96-4.879c.242-.605.93-.899 1.536-.656Zm-.443 1.958v11.211l.003-.001 4.577 2.873-1.318-5.242 4.148-3.466-5.393-.365-2.014-5.017-.003.007Z",
  "data-follow-fill": "#444"
}, null)]));
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  __name: "StarRating",
  __ssrInlineRender: true,
  props: {
    width: { default: 16 },
    star: { default: "5.0" },
    fill: { default: "#F79C42" }
  },
  setup(__props) {
    const props = __props;
    const mainStore = useMainStore();
    const starMap = computed(() => {
      const star = Number(props.star) || 0;
      return ["hollow", "hollow", "hollow", "hollow", "hollow"].map((item, index) => {
        if (star > index) {
          return star >= index + 1 ? "solid" : "half";
        }
        return item;
      });
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "the-star" }, _attrs))} data-v-81b21063><!--[-->`);
      ssrRenderList(starMap.value, (item, i) => {
        _push(`<!--[-->`);
        if (item === "solid") {
          _push(ssrRenderComponent(unref(StarFillIcon), {
            key: i + item,
            fill: _ctx.fill,
            width: _ctx.width,
            height: _ctx.width
          }, null, _parent));
        } else if (item === "half") {
          _push(ssrRenderComponent(unref(HalfStarIcon), {
            fill: _ctx.fill,
            width: _ctx.width,
            height: _ctx.width,
            style: { transform: unref(mainStore).isRtl ? "rotateY(180deg)" : "" }
          }, null, _parent));
        } else if (item === "hollow") {
          _push(ssrRenderComponent(unref(StarIcon), {
            fill: _ctx.fill,
            width: _ctx.width,
            height: _ctx.width
          }, null, _parent));
        } else {
          _push(`<!---->`);
        }
        _push(`<!--]-->`);
      });
      _push(`<!--]--></div>`);
    };
  }
});
const StarRating_vue_vue_type_style_index_0_scoped_81b21063_lang = "";
const _sfc_setup$9 = _sfc_main$9.setup;
_sfc_main$9.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/details/StarRating.vue");
  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
};
const StarRating = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-81b21063"]]);
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
  __name: "BaseInfo",
  __ssrInlineRender: true,
  props: {
    productName: { default: "" },
    changeProductOption: { type: Boolean, default: false },
    isShowToDetail: { type: Boolean, default: false },
    urlName: { default: "" },
    positionName: { default: "add_cart" },
    discount: { default: "" },
    price: { default: "1" },
    storePrice: { default: "1" },
    taxInfo: { default: "" },
    showFrom: { type: Boolean, default: false },
    isUniqueColorParentChildOutfit: { type: Boolean, default: false },
    previewImg: { default: "" },
    thumbnailSize: { default: "135x135" },
    skuId: { default: 0 },
    groupNameEn: { default: "" },
    colorNameEn: { default: "" },
    starLevel: { default: 5 },
    reviewCount: { default: 0 },
    isShowStar: { type: Boolean, default: false }
  },
  emits: ["onToDetail", "onToReview"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const mainStore = useMainStore();
    const isShowReviewStart = computed(() => {
      return props.isShowStar && props.reviewCount > 0;
    });
    const toDetail = computed(() => {
      const routerData = {
        name: "product_details",
        params: {
          name: props.urlName
        },
        query: {}
      };
      if (props.previewImg) {
        routerData.params.previewData = {
          image: props.previewImg,
          productName: props.urlName,
          name: props.productName,
          price: props.price,
          storePrice: props.storePrice,
          thumbnailSize: props.thumbnailSize,
          isMultiPrice: props.showFrom
        };
      }
      if (props.skuId) {
        routerData.query.sku_id = props.skuId;
      } else {
        if (props.groupNameEn && props.groupNameEn !== "default") {
          routerData.query.group_name_en = props.groupNameEn;
        }
        if (props.colorNameEn && props.colorNameEn) {
          routerData.query.color_name_en = props.colorNameEn;
        }
      }
      return routerData;
    });
    const onToDetail = () => {
      emits("onToDetail");
    };
    return (_ctx, _push, _parent, _attrs) => {
      const _component_pat_link = resolveComponent("pat-link");
      const _directive_track = resolveDirective("track");
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "product-base-info" }, _attrs))} data-v-8d408722><div class="${ssrRenderClass([{
        "to-details-wrap": props.isShowToDetail,
        "cart-popup": props.changeProductOption,
        "unique-color-parent-child-outfit": props.isUniqueColorParentChildOutfit
      }, "state"])}" data-v-8d408722>`);
      _push(ssrRenderComponent(PriceInfo, {
        price: _ctx.price,
        "store-price": props.discount ? props.storePrice : "0",
        discount: props.discount,
        "tax-info": props.taxInfo,
        "show-from": props.showFrom
      }, null, _parent));
      if (isShowReviewStart.value) {
        _push(`<div class="review-start" tabindex="-1" data-v-8d408722>`);
        _push(ssrRenderComponent(StarRating, {
          star: props.starLevel,
          fill: "#444"
        }, null, _parent));
        _push(`<span class="start-count" data-v-8d408722>${ssrInterpolate(props.reviewCount)}</span></div>`);
      } else {
        _push(`<!---->`);
      }
      if (props.isShowToDetail && props.urlName) {
        _push(ssrRenderComponent(_component_pat_link, mergeProps({
          to: toDetail.value,
          class: ["to-details", { rtl: unref(mainStore).isRtl }],
          "p-id": props.positionName + "_to_detail",
          onClick: onToDetail
        }, ssrGetDirectiveProps(_ctx, _directive_track, {
          pId: props.positionName + "_to_detail",
          eventName: "to_detail"
        }, void 0, { click: true })), {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`<span data-v-8d408722${_scopeId}>${ssrInterpolate(_ctx.$t("product.detail.details"))}</span>`);
              _push2(ssrRenderComponent(unref(ArrowRightIcon), {
                width: 20,
                fill: "#7C7C7C"
              }, null, _parent2, _scopeId));
            } else {
              return [
                createVNode("span", null, toDisplayString(_ctx.$t("product.detail.details")), 1),
                createVNode(unref(ArrowRightIcon), {
                  width: 20,
                  fill: "#7C7C7C"
                })
              ];
            }
          }),
          _: 1
        }, _parent));
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
      if (props.productName && !props.changeProductOption) {
        _push(`<h1 class="product-name" data-v-8d408722>${ssrInterpolate(_ctx.productName)}</h1>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
});
const BaseInfo_vue_vue_type_style_index_0_scoped_8d408722_lang = "";
const _sfc_setup$8 = _sfc_main$8.setup;
_sfc_main$8.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/details/BaseInfo.vue");
  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
};
const BaseInfo = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-8d408722"]]);
const eventName$3 = "family_member";
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  __name: "UniqueColorOptionPickerItem",
  __ssrInlineRender: true,
  props: {
    selected: { type: Boolean, default: false },
    positionName: {},
    productName: {},
    option: {}
  },
  emits: ["clickItem"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const text = computed(() => {
      return props.option.group_name_language;
    });
    const pId = computed(() => {
      return props.positionName ? `${props.positionName}_${eventName$3}` : eventName$3;
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_PImage = resolveComponent("PImage");
      const _directive_patpat_track = resolveDirective("patpat-track");
      _push(`<button${ssrRenderAttrs(mergeProps({
        "aria-selected": _ctx.selected,
        class: "product-option-picker-item",
        role: "tab"
      }, _attrs, ssrGetDirectiveProps(_ctx, _directive_patpat_track, {
        pId: pId.value,
        eventName: eventName$3,
        pContent: {}
      }, void 0, {
        exposure: true,
        click: true
      })))} data-v-89cb42a8><span class="${ssrRenderClass([{ selected: _ctx.selected }, "icon-wrap"])}" data-v-89cb42a8>`);
      _push(ssrRenderComponent(_component_PImage, {
        class: "icon",
        alt: `${_ctx.productName} ${text.value}`,
        src: props.option.icon || "",
        "lazy-load": "",
        "thumbnail-size": "39x39"
      }, null, _parent));
      _push(`</span><span class="text" data-v-89cb42a8>${ssrInterpolate(text.value)}</span></button>`);
    };
  }
});
const UniqueColorOptionPickerItem_vue_vue_type_style_index_0_scoped_89cb42a8_lang = "";
const _sfc_setup$7 = _sfc_main$7.setup;
_sfc_main$7.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/UniqueColorOptionPickerItem.vue");
  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
};
const UniqueColorOptionPickerItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-89cb42a8"]]);
const eventName$2 = "size";
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "SizeItem",
  __ssrInlineRender: true,
  props: {
    selected: { type: Boolean, default: false },
    positionName: {},
    option: {}
  },
  emits: ["clickItem"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const pId = computed(() => {
      return props.positionName ? `${props.positionName}_${eventName$2}` : eventName$2;
    });
    const text = computed(() => {
      return props.option.option_value_name;
    });
    const zeroStock = computed(() => {
      return props.option.stock < 1;
    });
    const computedClass = computed(() => {
      return {
        selected: props.selected,
        "zero-stock": zeroStock.value
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      _push(`<button${ssrRenderAttrs(mergeProps({
        disabled: zeroStock.value,
        "aria-selected": _ctx.selected,
        class: ["product-option-picker-item", computedClass.value],
        role: "tab"
      }, _attrs, ssrGetDirectiveProps(_ctx, _directive_track, {
        pId: pId.value,
        eventName: eventName$2,
        pContent: {}
      }, void 0, {
        exposure: true,
        click: true
      })))} data-v-e93ebe40><span data-v-e93ebe40>${ssrInterpolate(text.value)}</span></button>`);
    };
  }
});
const SizeItem_vue_vue_type_style_index_0_scoped_e93ebe40_lang = "";
const _sfc_setup$6 = _sfc_main$6.setup;
_sfc_main$6.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/SizeItem.vue");
  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
};
const SizeItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-e93ebe40"]]);
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  __name: "HotSvg",
  __ssrInlineRender: true,
  setup(__props) {
    const mainStore = useMainStore();
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<span${ssrRenderAttrs(mergeProps({
        class: ["hot-icon", { "hot-rtl": unref(mainStore).isRtl, en: unref(mainStore).language === "en" }]
      }, _attrs))} data-v-1a3c5b36>`);
      if (unref(mainStore).language === "en") {
        _push(`<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-1a3c5b36><rect width="24" height="12" rx="6" fill="#F1435A" data-v-1a3c5b36></rect><path d="M9.37 2.53003V9.50003H8.46V6.34003H4.91V9.50003H4V2.53003H4.91V5.59003H8.46V2.53003H9.37Z" fill="white" data-v-1a3c5b36></path><path d="M13.3138 9.59003C12.8005 9.59003 12.3338 9.47336 11.9138 9.24003C11.5005 9.0067 11.1738 8.6767 10.9338 8.25003C10.7005 7.8167 10.5838 7.3167 10.5838 6.75003C10.5838 6.19003 10.7038 5.6967 10.9438 5.27003C11.1905 4.8367 11.5238 4.5067 11.9438 4.28003C12.3638 4.0467 12.8338 3.93003 13.3538 3.93003C13.8738 3.93003 14.3438 4.0467 14.7638 4.28003C15.1838 4.5067 15.5138 4.83336 15.7538 5.26003C16.0005 5.6867 16.1238 6.18336 16.1238 6.75003C16.1238 7.3167 15.9972 7.8167 15.7438 8.25003C15.4972 8.6767 15.1605 9.0067 14.7338 9.24003C14.3072 9.47336 13.8338 9.59003 13.3138 9.59003ZM13.3138 8.79003C13.6405 8.79003 13.9472 8.71336 14.2338 8.56003C14.5205 8.4067 14.7505 8.1767 14.9238 7.87003C15.1038 7.56336 15.1938 7.19003 15.1938 6.75003C15.1938 6.31003 15.1072 5.9367 14.9338 5.63003C14.7605 5.32336 14.5338 5.0967 14.2538 4.95003C13.9738 4.7967 13.6705 4.72003 13.3438 4.72003C13.0105 4.72003 12.7038 4.7967 12.4238 4.95003C12.1505 5.0967 11.9305 5.32336 11.7638 5.63003C11.5972 5.9367 11.5138 6.31003 11.5138 6.75003C11.5138 7.1967 11.5938 7.57336 11.7538 7.88003C11.9205 8.1867 12.1405 8.4167 12.4138 8.57003C12.6872 8.7167 12.9872 8.79003 13.3138 8.79003Z" fill="white" data-v-1a3c5b36></path><path d="M18.4303 4.77003V8.00003C18.4303 8.2667 18.487 8.4567 18.6003 8.57003C18.7136 8.6767 18.9103 8.73003 19.1903 8.73003H19.8603V9.50003H19.0403C18.5336 9.50003 18.1536 9.38336 17.9003 9.15003C17.647 8.9167 17.5203 8.53336 17.5203 8.00003V4.77003H16.8103V4.02003H17.5203V2.64003H18.4303V4.02003H19.8603V4.77003H18.4303Z" fill="white" data-v-1a3c5b36></path></svg>`);
      } else {
        _push(`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-1a3c5b36><rect width="20" height="20" rx="10" fill="white" fill-opacity="0.8" data-v-1a3c5b36></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M9.95947 16.9516C9.71377 17.1577 4.44824 16.8458 4.44824 12.8013C4.44824 8.75679 7.05907 7.56873 8.29934 5.6127C9.53962 3.65668 8.64227 3.32646 8.55656 3.11158C8.47085 2.8967 11.2273 3.53672 12.4953 6.11194C12.9737 7.08357 13.283 8.0871 12.8182 10C12.7906 10.1138 13.9288 9.93005 13.8362 8.36523C13.8146 8.00088 15.8053 9.93295 15.3574 13.2246C14.9095 16.5163 10.6192 17.1876 10.7162 16.9163C10.8133 16.6449 11.959 16.0692 11.2492 14.5769C10.8545 13.7473 9.77539 13.387 9.51259 12.5894C9.24978 11.7917 9.49311 11.4571 9.46283 11.4123C9.43256 11.3676 7.79514 12.3066 8.16138 14.4896C8.52761 16.6726 10.2052 16.7455 9.95947 16.9516Z" fill="#F1435A" data-v-1a3c5b36></path></svg>`);
      }
      _push(`</span>`);
    };
  }
});
const HotSvg_vue_vue_type_style_index_0_scoped_1a3c5b36_lang = "";
const _sfc_setup$5 = _sfc_main$5.setup;
_sfc_main$5.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/HotSvg.vue");
  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
};
const HotSvg = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1a3c5b36"]]);
const eventName$1 = "color";
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  __name: "ColorItem",
  __ssrInlineRender: true,
  props: {
    selected: { type: Boolean, default: false },
    positionName: {},
    productName: {},
    option: {}
  },
  emits: ["clickItem"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const colorName = computed(() => {
      return props.option.option_value_en || props.option.option_value_name;
    });
    const pId = computed(() => {
      return props.positionName ? `${props.positionName}_${eventName$1}` : eventName$1;
    });
    const zeroStock = computed(() => {
      return props.option.stock < 1;
    });
    const computedClass = computed(() => {
      return {
        selected: props.selected,
        "zero-stock": zeroStock.value
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_PImage = resolveComponent("PImage");
      const _directive_track = resolveDirective("track");
      _push(`<button${ssrRenderAttrs(mergeProps({
        "aria-selected": props.selected,
        disabled: zeroStock.value,
        class: ["product-option-picker-item", computedClass.value],
        role: "tab"
      }, _attrs, ssrGetDirectiveProps(_ctx, _directive_track, {
        pId: pId.value,
        eventName: eventName$1,
        pContent: {}
      }, void 0, {
        exposure: true,
        click: true
      })))} data-v-bd26bcc5>`);
      if (_ctx.option.show_hot_skc === 1) {
        _push(ssrRenderComponent(HotSvg, null, null, _parent));
      } else {
        _push(`<!---->`);
      }
      _push(`<span class="color-wrap" data-v-bd26bcc5>`);
      _push(ssrRenderComponent(_component_PImage, {
        class: "color",
        alt: `${_ctx.productName} ${colorName.value}`,
        src: _ctx.option.icon,
        "lazy-load": "",
        "thumbnail-size": "39x39"
      }, null, _parent));
      _push(`</span></button>`);
    };
  }
});
const ColorItem_vue_vue_type_style_index_0_scoped_bd26bcc5_lang = "";
const _sfc_setup$4 = _sfc_main$4.setup;
_sfc_main$4.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/ColorItem.vue");
  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
};
const ColorItem = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bd26bcc5"]]);
const eventName = "family_member";
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  __name: "GroupItem",
  __ssrInlineRender: true,
  props: {
    selected: { type: Boolean, default: false },
    positionName: { default: "" },
    productName: { default: "" },
    option: {}
  },
  emits: ["clickItem"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const pId = computed(() => {
      return props.positionName ? `${props.positionName}_${eventName}` : eventName;
    });
    const text = computed(() => {
      return props.option.group_name_language;
    });
    const zeroStock = computed(() => {
      return props.option.stock < 1;
    });
    const computedClass = computed(() => {
      return {
        selected: props.selected,
        "zero-stock": zeroStock.value
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      if (props.option) {
        _push(`<button${ssrRenderAttrs(mergeProps({
          disabled: zeroStock.value,
          "aria-selected": _ctx.selected,
          class: ["product-option-picker-item", computedClass.value],
          role: "tab"
        }, _attrs, ssrGetDirectiveProps(_ctx, _directive_track, {
          pId: pId.value,
          eventName,
          pContent: {}
        }, void 0, {
          exposure: true,
          click: true
        })))} data-v-1c5c4bf4><span data-v-1c5c4bf4>${ssrInterpolate(text.value)}</span></button>`);
      } else {
        _push(`<!---->`);
      }
    };
  }
});
const GroupItem_vue_vue_type_style_index_0_scoped_1c5c4bf4_lang = "";
const _sfc_setup$3 = _sfc_main$3.setup;
_sfc_main$3.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/GroupItem.vue");
  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
};
const GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-1c5c4bf4"]]);
const BrowsingHistoryFillIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14 4.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19Zm-.5 3.75a.75.75 0 0 0-.743.648L12.75 9v5.643l2.847 2.884.083.073c.26.195.618.2.883.013l.094-.08.073-.083a.75.75 0 0 0 .013-.882l-.079-.095-2.414-2.445V9l-.007-.102a.75.75 0 0 0-.743-.648Z",
  "clip-rule": "evenodd",
  "fill-rule": "evenodd",
  "data-follow-fill": "#444"
}, null)]));
const HintIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14 4.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19ZM14 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 5.98a.75.75 0 0 1 .743.649l.007.102v6.019l-.007.102a.75.75 0 0 1-1.486 0l-.007-.102v-6.02l.007-.101A.75.75 0 0 1 14 11.98Zm0-3.23a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
  "data-follow-fill": "#444"
}, null)]));
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "index",
  __ssrInlineRender: true,
  props: {
    noSelectSku: { type: Boolean, default: false },
    showSizeChart: { type: Boolean, default: true },
    isHorizontal: { type: Boolean, default: false },
    defaultColorId: { default: -1 },
    defaultSkuId: { default: 0 },
    defaultGroupName: { default: "" },
    standardSizes: {},
    productName: { default: "" },
    productId: { default: 0 },
    options: {},
    positionName: { default: "" },
    categoryName: { default: "" },
    isParentChildOutfit: { type: Boolean, default: false },
    isUniqueColorParentChildOutfit: { type: Boolean, default: false }
  },
  emits: ["clickButton", "changeSku", "changeColor", "changeGroup", "changeSize", "changeImage", "onClickSizeChart"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const supportCategoryMap = ["Men", "Women"];
    const mainStore = useMainStore();
    const { t } = useI18n();
    ref();
    const selectColor = ref(null);
    const selectGroup = ref(null);
    const selectSize = ref(null);
    const selectSku = ref(null);
    ref(null);
    ref(false);
    const sizeDescriptionConfig = reactive({});
    const selectSizeDescription = ref([]);
    const stop = ref(false);
    const currentSkuOptionIds = computed(() => {
      const ids = [];
      if (selectColor.value && selectColor.value.option_value_id) {
        ids.push(selectColor.value.option_value_id);
      }
      if (selectGroup.value && selectGroup.value.group_name_en) {
        ids.push(selectGroup.value.group_name_en);
      }
      if (selectSize.value && selectSize.value.option_value_id) {
        ids.push(selectSize.value.option_value_id);
      }
      return ids;
    });
    const colorList = computed(() => {
      return props.options;
    });
    const groupsList = computed(() => {
      if (selectColor.value && selectColor.value.groups && selectColor.value.groups.length > 0) {
        return selectColor.value.groups;
      } else {
        return [];
      }
    });
    const sizeList = computed(() => {
      if (selectGroup.value) {
        return selectGroup.value.sizes || [];
      } else {
        return [];
      }
    });
    const stock = computed(() => {
      return selectSku.value ? selectSku.value.event_stock : 0;
    });
    const notSkuWraning = computed(() => {
      if (!selectColor.value) {
        return t("product.category.color_tip");
      }
      if (!selectGroup.value) {
        return t("product.category.group_tip");
      }
      if (selectGroup.value && selectGroup.value.group_name_en === "All") {
        return t("product.category.group_tip");
      }
      if (!selectSize.value) {
        return t("product.category.size_tip");
      }
      return "";
    });
    const selectImages = computed(() => {
      if (selectGroup.value && selectGroup.value.images.length > 0) {
        return selectGroup.value.images;
      }
      if (selectColor.value && selectColor.value.images.length > 0) {
        return selectColor.value.images;
      }
      return [];
    });
    watch(selectSku, (v) => {
      emits("changeSku", v);
    });
    watch(selectColor, (v) => {
      emits("changeColor", v);
    });
    watch(selectGroup, (v) => {
      emits("changeGroup", v);
      v && groupScrollToCenter();
    });
    watch(selectSize, (v) => {
      emits("changeSize", v);
      if (v && v.option_value_id) {
        changeSizeDescription(v.option_value_id);
      } else {
        changeSizeDescription(0);
      }
    });
    watch(selectImages, (v) => {
      emits("changeImage", v);
    });
    const clickColor = (color) => {
      if (color.stock > 0) {
        changeColor(color);
        emits("clickButton");
      }
    };
    const clickGroup = (group) => {
      if (group.stock > 0) {
        changeGroup(group);
        emits("clickButton");
      }
    };
    const clickUniqueColorGroup = (group) => {
      changeUniqueColorGroup(group);
      emits("clickButton");
    };
    const clickSize = (size) => {
      if (size.stock > 0) {
        changeSize(size);
        emits("clickButton");
      }
    };
    const changeColor = (color) => {
      var _a, _b, _c;
      if (color.stock <= 0) {
        selectColor.value = null;
        selectGroup.value = null;
        selectSize.value = null;
        selectSku.value = null;
      } else {
        appendClickTrackData("sku_color", "sku_color");
        selectColor.value = color;
        if (((_a = color.groups) == null ? void 0 : _a.length) === 0) {
          selectGroup.value = null;
          selectSize.value = null;
          selectSku.value = null;
          if (color.notSize && color.sku) {
            selectSku.value = color.sku;
          }
        } else if (((_b = color.groups) == null ? void 0 : _b.length) === 1) {
          color.groups[0] && changeGroup(color.groups[0], true);
        } else {
          if (selectGroup.value) {
            const oldGroup = (_c = color.groups) == null ? void 0 : _c.find((groupsItem) => {
              var _a2;
              return groupsItem && groupsItem.group_name_en === ((_a2 = selectGroup.value) == null ? void 0 : _a2.group_name_en);
            });
            if (oldGroup) {
              changeGroup(oldGroup);
            } else {
              selectGroup.value = null;
              selectSize.value = null;
              selectSku.value = null;
            }
          }
        }
      }
    };
    const changeUniqueColorGroup = (group) => {
      selectGroup.value = group;
      if (group.sizes.length === 1) {
        group.sizes[0] && changeSize(group.sizes[0]);
      } else {
        if (selectSize.value) {
          const oldsize = group.sizes.find((sizeItem) => {
            var _a;
            return sizeItem.option_value_id === ((_a = selectSize.value) == null ? void 0 : _a.option_value_id);
          });
          if (oldsize) {
            changeSize(oldsize);
          } else {
            selectSize.value = null;
            selectSku.value = null;
          }
        }
      }
    };
    const changeGroup = (group, dfaultSelectSize = false) => {
      if (group.stock <= 0) {
        selectGroup.value = null;
        selectSize.value = null;
        selectSku.value = null;
        if (dfaultSelectSize) {
          selectGroup.value = group;
        }
      } else {
        selectGroup.value = group;
        if (group.sizes.length === 1) {
          group.sizes[0] && changeSize(group.sizes[0]);
        } else {
          if (selectSize.value) {
            const oldsize = group.sizes.find((sizeItem) => {
              var _a;
              return sizeItem.option_value_id === ((_a = selectSize.value) == null ? void 0 : _a.option_value_id);
            });
            if (oldsize) {
              changeSize(oldsize);
            } else {
              selectSize.value = null;
              selectSku.value = null;
            }
          }
        }
      }
    };
    const changeSize = (size) => {
      if (size.stock <= 0) {
        selectSize.value = null;
        selectSku.value = null;
      } else {
        selectSize.value = size;
        selectSku.value = size.sku;
        appendClickTrackData("sku_size", "sku_size", {
          sku_size: size.option_value_name
        });
      }
    };
    const changeSizeDescription = (sizeId = 0) => {
      if (!sizeId) {
        selectSizeDescription.value = [];
        return;
      }
      if (sizeId in sizeDescriptionConfig) {
        selectSizeDescription.value = sizeDescriptionConfig[sizeId];
      } else {
        selectSizeDescription.value = findSizeDescription(sizeId);
      }
    };
    const reStartSku = (skuId = 0) => {
      const defaultSkuOInfo = getSkuIdOption(skuId);
      if (defaultSkuOInfo) {
        if (defaultSkuOInfo.color.stock > 0) {
          selectColor.value = defaultSkuOInfo.color;
        }
        if (defaultSkuOInfo.group && defaultSkuOInfo.group.stock > 0) {
          selectGroup.value = defaultSkuOInfo.group;
        }
        if (defaultSkuOInfo.size && defaultSkuOInfo.size.stock > 0) {
          selectSize.value = defaultSkuOInfo.size;
        }
        if (defaultSkuOInfo.sku && defaultSkuOInfo.sku.event_stock > 0) {
          selectSku.value = defaultSkuOInfo.sku || null;
        }
      }
    };
    const reStartGroup = (name, defaultColorId = -1) => {
      if (props.isUniqueColorParentChildOutfit) {
        const defaultGroupInfo = getGroupOption(name, defaultColorId, true);
        if (defaultGroupInfo) {
          selectColor.value = defaultGroupInfo.color;
          selectGroup.value = defaultGroupInfo.group;
        }
      } else {
        const defaultGroupInfo = getGroupOption(name, defaultColorId);
        if (defaultGroupInfo) {
          if (defaultGroupInfo.color.stock > 0) {
            selectColor.value = defaultGroupInfo.color;
          }
          if (defaultGroupInfo.group.stock > 0) {
            selectGroup.value = defaultGroupInfo.group;
          }
          selectSize.value = null;
          selectSku.value = null;
          if (selectGroup.value && selectGroup.value.sizes.length === 1) {
            if (defaultGroupInfo.group.sizes[0]) {
              changeSize(defaultGroupInfo.group.sizes[0]);
            }
          }
        }
      }
    };
    const reStartColor = (colorId = -1) => {
      var _a;
      const defaultColor = getColorOption(colorId);
      if (defaultColor) {
        if (defaultColor.stock > 0) {
          selectColor.value = defaultColor;
        }
        if (defaultColor.notSize && defaultColor.sku) {
          selectSku.value = defaultColor.sku;
        } else {
          selectGroup.value = null;
          selectSize.value = null;
          selectSku.value = null;
          if (selectColor.value && ((_a = selectColor.value.groups) == null ? void 0 : _a.length) === 1) {
            if (defaultColor.groups && defaultColor.groups[0]) {
              changeGroup(defaultColor.groups[0], true);
            }
          }
        }
      }
    };
    const getSkuIdOption = (skuId = 0) => {
      const arr = props.options;
      for (let i = 0; i < arr.length; i++) {
        const colorItem = arr[i];
        if ((colorItem == null ? void 0 : colorItem.groups) && colorItem.groups.length > 0) {
          for (let j = 0; j < colorItem.groups.length; j++) {
            const group = colorItem == null ? void 0 : colorItem.groups[j];
            if (group == null ? void 0 : group.sizes) {
              for (let k = 0; k < group.sizes.length; k++) {
                const size = group.sizes[k];
                const sizeSku = (size == null ? void 0 : size.sku) || null;
                if ((sizeSku == null ? void 0 : sizeSku.sku_id) === skuId) {
                  return {
                    color: colorItem,
                    group,
                    size,
                    sku: size == null ? void 0 : size.sku
                  };
                }
              }
            }
          }
        } else {
          if (colorItem && colorItem && colorItem.sku && colorItem.sku.sku_id && colorItem.sku.sku_id === skuId) {
            return {
              color: colorItem,
              group: null,
              size: null,
              sku: colorItem.sku || null
            };
          }
        }
      }
      return null;
    };
    const getGroupOption = (name, defaultColorId = -1, supportNotStock = false) => {
      if (defaultColorId > -1) {
        const arr = props.options;
        for (let i = 0; i < arr.length; i++) {
          const colorItem = arr[i];
          if (colorItem && colorItem.groups && colorItem.groups.length > 0) {
            for (let j = 0; j < colorItem.groups.length; j++) {
              const group = colorItem.groups[j];
              if (group && (group.sizes.length > 0 || supportNotStock) && group.group_name_en === name && defaultColorId === colorItem.option_value_id) {
                return {
                  color: colorItem,
                  group
                };
              }
            }
          }
        }
      } else {
        const arr = props.options;
        for (let i = 0; i < arr.length; i++) {
          const colorItem = arr[i];
          if (colorItem && colorItem.groups && colorItem.groups.length > 0) {
            for (let j = 0; j < colorItem.groups.length; j++) {
              const group = colorItem.groups[j];
              if (group && (group.sizes.length > 0 || supportNotStock) && group.group_name_en === name) {
                return {
                  color: colorItem,
                  group
                };
              }
            }
          }
        }
      }
      return null;
    };
    const getColorOption = (colorId = -1) => {
      const arr = props.options;
      for (let i = 0; i < arr.length; i++) {
        const colorItem = arr[i];
        if ((colorItem == null ? void 0 : colorItem.option_value_id) === colorId) {
          return colorItem;
        }
      }
      return null;
    };
    const findSizeDescription = (sizeId) => {
      let currentSizeChartProductId = props.productId;
      if (selectSku.value && selectSku.value.product_id) {
        currentSizeChartProductId = selectSku.value.product_id;
      }
      const standardSizes = props.standardSizes;
      let sizeDescription = [];
      if (sizeId && standardSizes) {
        const clickSizeInfo = standardSizes.find((sizeInfo) => {
          return sizeInfo.product_id === currentSizeChartProductId;
        });
        if (clickSizeInfo && clickSizeInfo.standard_size) {
          const currentStandardSize = clickSizeInfo.standard_size.find((y) => {
            const standar = y.find((x) => {
              if (x.key === "size" && "option_value_id" in x && sizeId === x.option_value_id) {
                return true;
              }
              return false;
            });
            return standar;
          });
          if (currentStandardSize && currentStandardSize.length > 0) {
            const inchCountries = ["US", "CA", "GB"];
            const sd = currentStandardSize.map((item) => {
              const value = inchCountries.includes(mainStore.countryCode) ? item.inch || item.lb : item.cm || item.kg;
              let unit = inchCountries.includes(mainStore.countryCode) ? item.inch ? "inch" : "lb" : item.cm ? "cm" : "kg";
              const sizeTypeSupport = [1, 2, 3];
              if (item.type && sizeTypeSupport.includes(item.type) && value !== "N/A" && value !== "0" && value !== 0 && value) {
                let convertValue = "";
                const hasSupportConvertCategoryName = props.categoryName === "Women" || props.isParentChildOutfit && selectGroup.value && supportCategoryMap.includes(selectGroup.value.group_name_en);
                if (hasSupportConvertCategoryName && item.type === 1 && unit === "inch") {
                  unit = "";
                  convertValue = onConvertHeight(value);
                }
                if (unit === "inch") {
                  unit = "“";
                }
                return {
                  title: item.key,
                  value: convertValue || value,
                  rawValue: value,
                  unit
                };
              }
              return void 0;
            });
            sizeDescription = sd.filter((d) => d);
          }
        }
      }
      sizeDescriptionConfig[sizeId] = sizeDescription;
      return sizeDescription;
    };
    const onConvertHeight = (value) => {
      if (typeof value === "string" || typeof value === "number") {
        return (value + "").split("-").map((v) => {
          const item = Number(v) * 10;
          const ft = parseInt(String(item / 120));
          const inch = parseInt(String(item % 120)) / 10;
          return `${ft}’ ${inch}“`;
        }).join("-");
      } else {
        return value;
      }
    };
    const stopEvent = () => {
      stop.value = true;
    };
    const groupScrollToCenter = (group) => {
    };
    stop.value = false;
    if (props.defaultSkuId) {
      reStartSku(props.defaultSkuId);
    } else if (props.defaultGroupName) {
      reStartGroup(props.defaultGroupName, props.defaultColorId);
    } else if (props.defaultColorId > -1) {
      reStartColor(props.defaultColorId);
    }
    onUnmounted(() => {
      stopEvent();
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      _push(`<div${ssrRenderAttrs(mergeProps({
        id: "sku-modlue",
        class: "product-option"
      }, _attrs))} data-v-82134872>`);
      if (_ctx.isUniqueColorParentChildOutfit) {
        _push(`<!--[-->`);
        if (groupsList.value.length > 1) {
          _push(`<div class="${ssrRenderClass([{ rtl: unref(mainStore).isRtl }, "unique-color-matching-outfits before"])}" data-v-82134872><div class="${ssrRenderClass([{ rtl: unref(mainStore).isRtl }, "option-picker-wrap horizontal"])}" role="tablist" data-v-82134872><!--[-->`);
          ssrRenderList(groupsList.value, (sizeGroup, idx) => {
            _push(ssrRenderComponent(UniqueColorOptionPickerItem, {
              key: sizeGroup.group_name_en + "" + idx,
              "product-name": props.productName,
              option: sizeGroup,
              type: "group",
              selected: currentSkuOptionIds.value.includes(sizeGroup.group_name_language),
              "position-name": sizeGroup.group_name_en === "All" ? "product_detail_all" : "product_detail_characters",
              onClickItem: clickUniqueColorGroup
            }, null, _parent));
          });
          _push(`<!--]--></div></div>`);
        } else {
          _push(`<!---->`);
        }
        ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
        _push(`<!--]-->`);
      } else {
        _push(`<!--[-->`);
        if (colorList.value.length > 0) {
          _push(`<div class="color" data-v-82134872><div class="option-title" data-v-82134872><span class="title" tabindex="0" data-v-82134872>${ssrInterpolate(_ctx.$t("product.color"))}: `);
          if (selectColor.value && selectColor.value.option_value_name) {
            _push(`<span class="color" data-v-82134872>${ssrInterpolate(selectColor.value.option_value_name)}</span>`);
          } else {
            _push(`<!---->`);
          }
          _push(`</span></div>`);
          if (colorList.value.length > 1) {
            _push(`<div class="${ssrRenderClass([{ horizontal: _ctx.isHorizontal }, "option-picker-wrap"])}" role="tablist" data-v-82134872><!--[-->`);
            ssrRenderList(colorList.value, (color, i) => {
              _push(ssrRenderComponent(ColorItem, {
                key: color.option_value_id + "" + i,
                option: color,
                selected: currentSkuOptionIds.value.includes(color.option_value_id),
                "position-name": props.positionName,
                "product-name": props.productName,
                onClickItem: clickColor
              }, null, _parent));
            });
            _push(`<!--]--></div>`);
          } else {
            _push(`<div style="${ssrRenderStyle({ "height": "8px" })}" data-v-82134872></div>`);
          }
          _push(`</div>`);
        } else {
          _push(`<!---->`);
        }
        if (groupsList.value.length > 1 || props.isParentChildOutfit) {
          _push(`<div class="matching-outfits" data-v-82134872><div class="option-title" data-v-82134872><span class="title" tabindex="0" data-v-82134872>${ssrInterpolate(_ctx.$t("product.detail.family_member"))}</span></div><ul role="tablist" class="${ssrRenderClass([{ horizontal: props.isHorizontal }, "option-picker-wrap"])}" data-v-82134872><!--[-->`);
          ssrRenderList(groupsList.value, (sizeGroup, idx) => {
            _push(ssrRenderComponent(GroupItem, {
              key: sizeGroup.group_name_en + "" + idx,
              option: sizeGroup,
              type: "group",
              "position-name": props.positionName,
              selected: currentSkuOptionIds.value.includes(sizeGroup.group_name_en),
              onClickItem: clickGroup
            }, null, _parent));
          });
          _push(`<!--]--></ul></div>`);
        } else {
          _push(`<!---->`);
        }
        _push(`<!--]-->`);
      }
      if (sizeList.value.length > 0) {
        _push(`<div class="size" data-v-82134872><div class="option-title" data-v-82134872><span class="title" tabindex="0" data-v-82134872>${ssrInterpolate(_ctx.$t("product.category.size"))}</span>`);
        if (_ctx.showSizeChart) {
          _push(`<button${ssrRenderAttrs(mergeProps({ class: "size-chart" }, ssrGetDirectiveProps(_ctx, _directive_track, {
            pId: _ctx.positionName + "_size_chart",
            eventName: "size_chart"
          }, void 0, { exposure: true })))} data-v-82134872>${ssrInterpolate(_ctx.$t("product.detail.size_chart"))} `);
          _push(ssrRenderComponent(unref(ArrowRightIcon), {
            class: { rtl: unref(mainStore).isRtl },
            width: 20,
            fill: "#7C7C7C"
          }, null, _parent));
          _push(`</button>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div><ul role="tablist" class="${ssrRenderClass([{ horizontal: _ctx.isHorizontal }, "option-picker-wrap"])}" data-v-82134872><!--[-->`);
        ssrRenderList(sizeList.value, (size, idx) => {
          _push(ssrRenderComponent(SizeItem, {
            key: size.option_value_id + "" + idx,
            option: size,
            "position-name": props.positionName,
            selected: currentSkuOptionIds.value.includes(size.option_value_id),
            onClickItem: clickSize
          }, null, _parent));
        });
        _push(`<!--]--></ul>`);
        if (selectSizeDescription.value.length > 0) {
          _push(`<div tabindex="0" class="size-description" data-v-82134872><span data-v-82134872>${ssrInterpolate(_ctx.$t("product.size_body"))}</span><div class="content" data-v-82134872><!--[-->`);
          ssrRenderList(selectSizeDescription.value, (sd, index) => {
            _push(`<p class="${ssrRenderClass({ border: index === 0 })}" data-v-82134872>${ssrInterpolate(sd.title)}: <i class="patpat-Bold" data-v-82134872>${ssrInterpolate(sd.value)} ${ssrInterpolate(sd.unit)}</i></p>`);
          });
          _push(`<!--]--></div></div>`);
        } else {
          _push(`<!---->`);
        }
        if (stock.value > 0 && stock.value < 15) {
          _push(`<p class="stock-wraning" data-v-82134872>`);
          _push(ssrRenderComponent(unref(BrowsingHistoryFillIcon), {
            width: 20,
            fill: "#F1435A"
          }, null, _parent));
          _push(` ${ssrInterpolate(_ctx.$t("product.detail.lastStock", { stock: stock.value }))}</p>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<p style="${ssrRenderStyle(notSkuWraning.value && props.noSelectSku ? null : { display: "none" })}" class="not-sku-wraning" data-v-82134872>`);
      _push(ssrRenderComponent(unref(HintIcon), {
        width: 20,
        fill: "#F1435A"
      }, null, _parent));
      _push(` ${ssrInterpolate(notSkuWraning.value)}</p></div>`);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_82134872_lang = "";
const _sfc_setup$2 = _sfc_main$2.setup;
_sfc_main$2.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/product/OptionPicker/index.vue");
  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
};
const OptionPicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-82134872"]]);
const offShelf = "";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "CategoryListSkeleton",
  __ssrInlineRender: true,
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(ssrRenderComponent(unref(ContentLoader), mergeProps({
        width: "100vw",
        height: 780,
        speed: 1,
        "primary-color": "#f3f3f3",
        "secondary-color": "#ecebeb",
        "unique-key": "categoryListSkeleton"
      }, _attrs), {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<rect x="0" y="16" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="16" y="197" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="16" y="237" rx="4" ry="4"${ssrRenderAttr("width", 7400 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="197" y="16" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="205" y="197" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="205" y="237" rx="4" ry="4"${ssrRenderAttr("width", 4e3 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="0" y="269" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="16" y="450" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="16" y="490" rx="4" ry="4"${ssrRenderAttr("width", 7400 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="197" y="269" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="205" y="450" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="205" y="490" rx="4" ry="4"${ssrRenderAttr("width", 4e3 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="0" y="522" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="16" y="703" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="16" y="743" rx="4" ry="4"${ssrRenderAttr("width", 7400 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="197" y="522" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="205" y="703" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="205" y="743" rx="4" ry="4"${ssrRenderAttr("width", 4e3 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="0" y="775" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="16" y="956" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="16" y="996" rx="4" ry="4"${ssrRenderAttr("width", 7400 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="197" y="775" rx="8" ry="8"${ssrRenderAttr("width", 18e3 / 375 + "%")} height="165" data-v-78b64192${_scopeId}></rect><rect x="205" y="956" rx="4" ry="4"${ssrRenderAttr("width", 13700 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect><rect x="205" y="996" rx="4" ry="4"${ssrRenderAttr("width", 4e3 / 375 + "%")} height="24" data-v-78b64192${_scopeId}></rect>`);
          } else {
            return [
              createVNode("rect", {
                x: "0",
                y: "16",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "16",
                y: "197",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "16",
                y: "237",
                rx: "4",
                ry: "4",
                width: 7400 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "197",
                y: "16",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "205",
                y: "197",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "205",
                y: "237",
                rx: "4",
                ry: "4",
                width: 4e3 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "0",
                y: "269",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "16",
                y: "450",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "16",
                y: "490",
                rx: "4",
                ry: "4",
                width: 7400 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "197",
                y: "269",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "205",
                y: "450",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "205",
                y: "490",
                rx: "4",
                ry: "4",
                width: 4e3 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "0",
                y: "522",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "16",
                y: "703",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "16",
                y: "743",
                rx: "4",
                ry: "4",
                width: 7400 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "197",
                y: "522",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "205",
                y: "703",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "205",
                y: "743",
                rx: "4",
                ry: "4",
                width: 4e3 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "0",
                y: "775",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "16",
                y: "956",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "16",
                y: "996",
                rx: "4",
                ry: "4",
                width: 7400 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "197",
                y: "775",
                rx: "8",
                ry: "8",
                width: 18e3 / 375 + "%",
                height: "165"
              }),
              createVNode("rect", {
                x: "205",
                y: "956",
                rx: "4",
                ry: "4",
                width: 13700 / 375 + "%",
                height: "24"
              }),
              createVNode("rect", {
                x: "205",
                y: "996",
                rx: "4",
                ry: "4",
                width: 4e3 / 375 + "%",
                height: "24"
              })
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const CategoryListSkeleton_vue_vue_type_style_index_0_scoped_78b64192_lang = "";
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/skeleton/CategoryListSkeleton.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const CategoryListSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-78b64192"]]);
const __default__ = defineComponent({
  name: "ProductDetails",
  components: {
    ProductDetailSkeleton,
    Preview,
    OptionPicker,
    CategoryListSkeleton
  }
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  __ssrInlineRender: true,
  setup(__props) {
    const { t } = useI18n();
    const { uts } = useL10n();
    const mainStore = useMainStore();
    const userInfoStore = useUserInfoStore();
    const route = useRoute();
    const productStore = useProductDetailsStore();
    const thumbnailSize = "333.33x333.33";
    const previewData = route.params.previewData ? route.params.previewData : null;
    const preImageThumbnailSize = previewData ? previewData.thumbnailSize : thumbnailSize;
    const productConfig = reactive({
      product: productStore.productData
    });
    const serverRenderImage = ref("");
    const initialSwipe = ref(0);
    const noSelectSku = ref(false);
    const baseInfoRef = ref();
    const recommendProducts = ref([]);
    const page = ref(1);
    const selectInfo = reactive({
      selectColor: null,
      selectGroup: null,
      selectSku: null,
      selectImages: []
    });
    const product = computed(() => {
      return productConfig.product;
    });
    const productName = computed(() => {
      return product.value && product.value.productName ? product.value.productName : "";
    });
    const taxInfo = computed(() => {
      return product.value ? product.value.taxInfo : "";
    });
    computed(() => {
      return product.value ? product.value.productId : 0;
    });
    const optionsConfig = computed(() => {
      if (productConfig.product && productConfig.product.optionsConfig) {
        return productConfig.product.optionsConfig;
      } else {
        return {
          defaultSkuId: 0,
          defaultColorId: -1,
          defaultGroupName: "",
          options: [],
          defaultSelectImages: []
        };
      }
    });
    const seoImageColor = computed(() => {
      if (selectInfo.selectColor) {
        return selectInfo.selectColor.option_value_en;
      } else {
        return optionsConfig.value.options[0] ? optionsConfig.value.options[0].option_value_en : "";
      }
    });
    const skuList = computed(() => {
      let map = [];
      optionsConfig.value.options.forEach((item) => {
        if (item && item.skuList && item.skuList.length > 0)
          map = map.concat(item.skuList);
      });
      return map;
    });
    const currentSkuList = computed(() => {
      if (selectInfo.selectGroup && selectInfo.selectGroup.skuList.length > 0) {
        return selectInfo.selectGroup.skuList;
      }
      if (selectInfo.selectColor && selectInfo.selectColor.skuList.length) {
        return selectInfo.selectColor.skuList;
      }
      return skuList.value;
    });
    const minPriceSku = computed(() => {
      const minPrice = Math.min.apply(
        Math,
        currentSkuList.value.map(function(o) {
          return Number(o.event_price);
        })
      );
      const minPriceSku2 = currentSkuList.value.find((item) => minPrice === Number(item.event_price) - 0);
      return minPriceSku2;
    });
    const currentSku = computed(() => {
      if (selectInfo.selectSku) {
        return selectInfo.selectSku;
      } else if (minPriceSku.value) {
        return minPriceSku.value;
      } else {
        return skuList.value.length > 0 ? skuList.value[0] : null;
      }
    });
    const skuId = computed(() => {
      var _a;
      return ((_a = currentSku.value) == null ? void 0 : _a.sku_id) || 0;
    });
    const eventInfo = computed(() => {
      if (product.value && product.value.layoutInfo) {
        const eventInfo2 = product.value.layoutInfo.filter((item) => {
          return item.type === "event_banner";
        });
        if (eventInfo2[0]) {
          return eventInfo2[0].content;
        }
      }
      return null;
    });
    const eventProduct = computed(() => {
      if (eventInfo.value) {
        const eventProduct2 = eventInfo.value ? eventInfo.value.product_skus.filter((product2) => {
          return product2.sku_id === skuId.value;
        }) : [];
        if (eventProduct2[0]) {
          return {
            event_id: eventInfo.value.event_id || 0,
            price: eventProduct2[0].price || eventProduct2[0].event_price
          };
        }
      }
      return null;
    });
    const price = computed(() => {
      if (eventProduct.value && eventProduct.value.event_id) {
        return eventProduct.value.price;
      }
      return currentSku.value ? currentSku.value.event_price : "1";
    });
    const storePrice = computed(() => {
      return currentSku.value ? currentSku.value.event_stock : price.value;
    });
    const discount = computed(() => {
      if (eventProduct.value && eventProduct.value.event_id) {
        return discountCalculation(price.value, storePrice.value);
      }
      return "";
    });
    const showFrom = computed(() => {
      if (selectInfo.selectSku) {
        return false;
      }
      return currentSkuList.value.some((sku) => currentSkuList.value.filter((sku1) => sku1.event_price !== sku.event_price).length > 1);
    });
    const icons = computed(() => {
      if (selectInfo.selectImages.length > 0) {
        return selectInfo.selectImages;
      } else {
        return optionsConfig.value.defaultSelectImages;
      }
    });
    const productPicMap = computed(() => {
      const productPicMap2 = icons.value;
      if (mainStore.isRtl) {
        setInitialSwipe(productPicMap2.length - 1);
        return JSON.parse(JSON.stringify(productPicMap2)).reverse();
      }
      return productPicMap2;
    });
    const preImageUrl = computed(() => {
      let preImageUrl2 = "";
      if (previewData && previewData.image) {
        const previewImg = previewData.image;
        const i = mainStore.isRtl ? productPicMap.value.length - 1 : 0;
        const fristImg = productPicMap.value[i];
        if (fristImg && fristImg.icon === previewData.image) {
          preImageUrl2 = cdnUrl({ url: previewImg, size: preImageThumbnailSize, type: "", isSupportWebp: true });
        }
      }
      return preImageUrl2;
    });
    const isUniqueColorParentChildOutfit = computed(() => {
      var _a;
      return (_a = product.value) == null ? void 0 : _a.isSingleColorMatchingOutfits;
    });
    const closeWraning = () => {
      noSelectSku.value = false;
    };
    const changeColor = (color) => {
      selectInfo.selectColor = color;
      closeWraning();
    };
    const changeGroup = (group) => {
      selectInfo.selectGroup = group;
      closeWraning();
    };
    const changeSku = (sku) => {
      selectInfo.selectSku = sku;
    };
    const changeImage = (v) => {
      var _a;
      if (v.length === ((_a = selectInfo.selectImages) == null ? void 0 : _a.length)) {
        const isChange = v.find((item, i) => {
          var _a2;
          return item.icon !== ((_a2 = selectInfo.selectImages[i]) == null ? void 0 : _a2.icon);
        });
        if (isChange) {
          selectInfo.selectImages = v;
        }
      } else {
        selectInfo.selectImages = v;
      }
    };
    const onToReview = () => {
      console.log("onToReview");
    };
    const setInitialSwipe = (v) => {
      initialSwipe.value = v;
    };
    const setProductData = (v) => {
      productConfig.product = v;
    };
    const getProductDetails = async () => {
      await productStore.getProductDetails().then((res) => {
        setProductData(productStore.productData);
        updatePageTitle(productName.value);
      }).catch((err) => {
        console.log("getProductDetails", err);
      });
    };
    const getRecommendProducts = () => {
    };
    const updatePageTitle = (name) => {
      const price2 = "1";
      const title = t("product.detail.product_details_mate_title", { name, price: uts(price2), tdk: mainStore.seoPatPatTdk });
      useDocumentTitle(title);
    };
    productConfig.product && productConfig.product.displayStatus === 4;
    userInfoStore.isNewUser;
    onServerPrefetch(async () => {
      var _a, _b;
      const ctx = useSSRContext();
      await getProductDetails();
      const i = mainStore.isRtl ? productPicMap.value.length - 1 : 0;
      if (productPicMap.value[i] && ((_a = productPicMap.value[i]) == null ? void 0 : _a.icon)) {
        const preImg = (_b = productPicMap.value[i]) == null ? void 0 : _b.icon;
        if (preImg) {
          serverRenderImage.value = cdnUrl({ url: preImg, size: thumbnailSize, type: "", isSupportWebp: true });
        }
      }
      const imageType = serverRenderImage.value.split(".").pop();
      if (ctx) {
        ctx.renderPreloadLink = imageType ? `<link rel="preload" href="${serverRenderImage.value}" as="image" type="image/${imageType}">` : "";
      }
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = resolveComponent("ClientOnly");
      const _directive_track = resolveDirective("track");
      if (product.value) {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "product-details" }, _attrs))} data-v-63c5b5f4>`);
        if (product.value && product.value.displayStatus === 1 && product.value.productInfo) {
          _push(`<!--[-->`);
          _push(ssrRenderComponent(Images, {
            ref: "imagesChild",
            images: productPicMap.value,
            "initial-swipe": initialSwipe.value,
            "thumbnail-size": thumbnailSize,
            "pre-image-url": preImageUrl.value || serverRenderImage.value,
            "server-render-image": serverRenderImage.value,
            "product-name": productName.value,
            "seo-image-color": seoImageColor.value
          }, null, _parent));
          _push(ssrRenderComponent(_component_ClientOnly, null, {
            default: withCtx((_, _push2, _parent2, _scopeId) => {
              if (_push2) {
                if (!isUniqueColorParentChildOutfit.value) {
                  _push2(ssrRenderComponent(BaseInfo, {
                    ref_key: "baseInfoRef",
                    ref: baseInfoRef,
                    "show-from": showFrom.value,
                    "sku-id": skuId.value,
                    price: price.value,
                    "store-price": storePrice.value,
                    discount: discount.value,
                    "is-show-star": true,
                    "product-name": productName.value,
                    "tax-info": taxInfo.value,
                    "is-show-to-detail": false,
                    "review-count": 10,
                    "star-level": 5,
                    onOnToReview: onToReview
                  }, null, _parent2, _scopeId));
                } else {
                  _push2(`<!---->`);
                }
                _push2(ssrRenderComponent(OptionPicker, {
                  ref: "optionPickerRef",
                  "is-unique-color-parent-child-outfit": isUniqueColorParentChildOutfit.value,
                  options: optionsConfig.value.options,
                  "default-sku-id": optionsConfig.value.defaultSkuId,
                  "default-group-name": optionsConfig.value.defaultGroupName,
                  "default-color-id": optionsConfig.value.defaultColorId,
                  "no-select-sku": noSelectSku.value,
                  "category-name": product.value.first_level_category_name || "",
                  "product-name": product.value.productName,
                  "standard-sizes": product.value.sizesInfo,
                  "product-id": product.value.productId,
                  "show-size-chart": product.value.showSizeChart,
                  "is-parent-child-outfit": product.value.isParentChildOutfit,
                  onChangeImage: changeImage,
                  onChangeSku: changeSku,
                  onChangeColor: changeColor,
                  onChangeGroup: changeGroup,
                  onChangeSize: closeWraning
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      if (isUniqueColorParentChildOutfit.value) {
                        _push3(ssrRenderComponent(BaseInfo, {
                          ref_key: "baseInfoRef",
                          ref: baseInfoRef,
                          "show-from": showFrom.value,
                          "sku-id": skuId.value,
                          price: price.value,
                          "store-price": storePrice.value,
                          discount: discount.value,
                          "is-show-star": true,
                          "product-name": productName.value,
                          "tax-info": taxInfo.value,
                          "is-show-to-detail": false,
                          "review-count": 10,
                          "star-level": 5,
                          class: "base-info",
                          onOnToReview: onToReview
                        }, null, _parent3, _scopeId2));
                      } else {
                        _push3(`<!---->`);
                      }
                    } else {
                      return [
                        isUniqueColorParentChildOutfit.value ? (openBlock(), createBlock(BaseInfo, {
                          key: 0,
                          ref_key: "baseInfoRef",
                          ref: baseInfoRef,
                          "show-from": showFrom.value,
                          "sku-id": skuId.value,
                          price: price.value,
                          "store-price": storePrice.value,
                          discount: discount.value,
                          "is-show-star": true,
                          "product-name": productName.value,
                          "tax-info": taxInfo.value,
                          "is-show-to-detail": false,
                          "review-count": 10,
                          "star-level": 5,
                          class: "base-info",
                          onOnToReview: onToReview
                        }, null, 8, ["show-from", "sku-id", "price", "store-price", "discount", "product-name", "tax-info"])) : createCommentVNode("", true)
                      ];
                    }
                  }),
                  _: 1
                }, _parent2, _scopeId));
              } else {
                return [
                  !isUniqueColorParentChildOutfit.value ? (openBlock(), createBlock(BaseInfo, {
                    key: 0,
                    ref_key: "baseInfoRef",
                    ref: baseInfoRef,
                    "show-from": showFrom.value,
                    "sku-id": skuId.value,
                    price: price.value,
                    "store-price": storePrice.value,
                    discount: discount.value,
                    "is-show-star": true,
                    "product-name": productName.value,
                    "tax-info": taxInfo.value,
                    "is-show-to-detail": false,
                    "review-count": 10,
                    "star-level": 5,
                    onOnToReview: onToReview
                  }, null, 8, ["show-from", "sku-id", "price", "store-price", "discount", "product-name", "tax-info"])) : createCommentVNode("", true),
                  createVNode(OptionPicker, {
                    ref: "optionPickerRef",
                    "is-unique-color-parent-child-outfit": isUniqueColorParentChildOutfit.value,
                    options: optionsConfig.value.options,
                    "default-sku-id": optionsConfig.value.defaultSkuId,
                    "default-group-name": optionsConfig.value.defaultGroupName,
                    "default-color-id": optionsConfig.value.defaultColorId,
                    "no-select-sku": noSelectSku.value,
                    "category-name": product.value.first_level_category_name || "",
                    "product-name": product.value.productName,
                    "standard-sizes": product.value.sizesInfo,
                    "product-id": product.value.productId,
                    "show-size-chart": product.value.showSizeChart,
                    "is-parent-child-outfit": product.value.isParentChildOutfit,
                    onChangeImage: changeImage,
                    onChangeSku: changeSku,
                    onChangeColor: changeColor,
                    onChangeGroup: changeGroup,
                    onChangeSize: closeWraning
                  }, {
                    default: withCtx(() => [
                      isUniqueColorParentChildOutfit.value ? (openBlock(), createBlock(BaseInfo, {
                        key: 0,
                        ref_key: "baseInfoRef",
                        ref: baseInfoRef,
                        "show-from": showFrom.value,
                        "sku-id": skuId.value,
                        price: price.value,
                        "store-price": storePrice.value,
                        discount: discount.value,
                        "is-show-star": true,
                        "product-name": productName.value,
                        "tax-info": taxInfo.value,
                        "is-show-to-detail": false,
                        "review-count": 10,
                        "star-level": 5,
                        class: "base-info",
                        onOnToReview: onToReview
                      }, null, 8, ["show-from", "sku-id", "price", "store-price", "discount", "product-name", "tax-info"])) : createCommentVNode("", true)
                    ]),
                    _: 1
                  }, 8, ["is-unique-color-parent-child-outfit", "options", "default-sku-id", "default-group-name", "default-color-id", "no-select-sku", "category-name", "product-name", "standard-sizes", "product-id", "show-size-chart", "is-parent-child-outfit"])
                ];
              }
            }),
            _: 1
          }, _parent));
          _push(`<!--]-->`);
        } else {
          _push(`<!--[--><div${ssrRenderAttrs(mergeProps({ class: "off-the" }, ssrGetDirectiveProps(_ctx, _directive_track, getRecommendProducts, void 0, { exposure: true })))} data-v-63c5b5f4><img${ssrRenderAttr("src", unref(offShelf))}${ssrRenderAttr("alt", _ctx.$t("product.detail.product_is_out_of_stock"))} data-v-63c5b5f4><span data-v-63c5b5f4>${ssrInterpolate(_ctx.$t("product.detail.product_is_out_of_stock"))}</span></div>`);
          if (!recommendProducts.value.length && page.value === 1) {
            _push(ssrRenderComponent(CategoryListSkeleton, null, null, _parent));
          } else {
            _push(`<!---->`);
          }
          _push(`<!--]-->`);
        }
        _push(`</div>`);
      } else if (unref(previewData)) {
        _push(ssrRenderComponent(Preview, mergeProps({
          "preview-data": unref(previewData),
          "thumbnail-size": unref(preImageThumbnailSize)
        }, _attrs), null, _parent));
      } else {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "loading-wrap" }, _attrs))} data-v-63c5b5f4>`);
        _push(ssrRenderComponent(ProductDetailSkeleton, null, null, _parent));
        _push(`</div>`);
      }
    };
  }
});
const ProductDetails_vue_vue_type_style_index_0_scoped_63c5b5f4_lang = "";
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/product/ProductDetails.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63c5b5f4"]]);
export {
  ProductDetails as default
};
